<template>
  <view
    v-if="_width != '0px' && _width != '0%'"
    :style="[_width ? { width: _width } : '']"
    class="flex flex-row flex-row-top-start py-6"
  >
    <view :style="[labelWidth ? { width: labelWidth + 'rpx' } : '']" class="flex-shrink">
      <tm-text _class="opacity-7" :font-size="_fontSize" :label="props.label"></tm-text>
    </view>
    <view class="flex-1 wrap" :style="{ width: '0px' }">
      <slot><tm-text :color="props.color" _class="px-16" :font-size="_fontSize" :label="props.value"></tm-text></slot>
    </view>
  </view>
</template>

<script lang="ts" setup>
import tmText from '../tm-text/tm-text.vue'
import { computed, inject } from 'vue'
const _width: string = inject('tmDescriptionsItem', '')
const labelWidth: string = inject('tmDescriptionsLabelWidth', '')
const props = defineProps({
  label: {
    type: String,
    default: '',
  },
  value: {
    type: String,
    default: '',
  },
  color: {
    type: String,
    default: '',
  },
  fontSize: {
    type: Number,
    default: 23,
  },
})
const _fontSize = computed(() => props.fontSize)
</script>

<style></style>
